import 'antd/dist/antd.css';
import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
import { Avatar, Button, Comment, Form, Input, List, Tooltip } from 'antd';
import moment from 'moment';
import { UserOutlined } from '@ant-design/icons';
import React from 'react';
import Dianzan from './dianzan';
import Edit from './Edit';
import Actions from './actions';
import Item from 'antd/lib/list/Item';
import axios from 'axios'
import  { useEffect, useState, createElement } from 'react';
import './comment.css';

const { TextArea } = Input;

var store = window.localStorage

var dataSource

const Commentarea = (props, ref) => {

  const [ElementsData, setElementsData] = useState("")

  const [CommentsData, setCommentsData] = useState("")

  const [action, setAction] = useState(null);


  const request = axios.create({
    baseURL: "http://localhost:8080",
  });

  const like = (user, item) => {
    setAction('liked')
    item.likes = item.likes + 1
    console.log(item)
    // var vote_data = {
    //   "username": user,
    //   "id": item.id,
    //   "type": true,
    // }
    // request.post('/api/vote', vote_data).then(
    //   res => {
    //     setAction('liked')
    //     item.likes = item.likes + 1
    //     window.location.reload()
    //   }
    // )
  };

  const dislike = (user, item) => {
    setAction('disliked')
    // var vote_data = {
    //   "username": user,
    //   "id": item.id,
    //   "type": false,
    // }
    // request.post('/api/vote', vote_data).then(
    //   res => {
    //     setAction('disliked')
    //     item.dislikes = item.dislikes + 1
    //     window.location.reload()
    //   }
    // )
  };

  useEffect(()=>{
    const getData = async() => {
      var class_name = store.getItem("ClassPage")
      var user_name = store.getItem("UserName")
      var comments_data = {
        "course": class_name,
      }
      request.post('/api/getAllComments', comments_data).then(  
        res => {  
          dataSource = res.data
          console.log(res.data)
          let tmp = [...dataSource]
          setCommentsData(tmp)
          var elements_tmp = []
          tmp.forEach((item)=>{
            // console.log(item)
            elements_tmp.push(<div><Comment 
                avatar={ <Avatar style={{ backgroundColor: '#87d068' }}  icon={<UserOutlined />} /> }
                author={item.commenter}
                content={item.comment}
                datetime={
                  <Tooltip title="2022-12-7 11:22:33">
                    <span>{item.time}</span>
                  </Tooltip>
                }
                // actions={[
                //   <Tooltip className="left" key="comment-basic-like" title="Like">
                //     <span onClick={() => like(user_name, item)}>
                //       {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
                //       <span className="comment-action">{item.likes}</span>
                //     </span>
                //   </Tooltip>,
                //   <Tooltip key="comment-basic-dislike" title="Dislike">
                //     <span onClick={() => dislike(user_name, item)}>
                //       {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
                //       <span className="comment-action">{item.dislikes}</span>
                //     </span>
                //   </Tooltip>,
                // ]}
              
                
              />
              <Actions item={item}></Actions>
              </div>
            )
            let tmp_element = [...elements_tmp]
            setElementsData(tmp_element)
          })
        }
      ).catch(res => {  // 错误处理
        console.log(res.data.res)
      })
    }
    getData()
  },[])

  return (  
    
    <> 
     
  {ElementsData}
     
      
       <Edit/>
    </>
  );
};
export default Commentarea;